<html>
<head>
    <meta charset="UTF-8">
    <title>考勤</title>
</head>
<body>
<script type="text/javascript" src="./$.js"></script>
<script>
    require(['!this.js'], $$.load)
</script>
</body>
</html>
<template data-name="this.htm">
    <div>
        <head_top></head_top>
        <div class="contaniner">
            <div class="sidebar">
                <menu_child :nav_data="menu_child"></menu_child>
            </div>
            <div class="main-content">
                <div class="main">
                    <div class="tab-wrap">
                        <div class="main_hd no-tab">
                            <h2>人员管理</h2>
                        </div>
                    </div>
                    <div class="cf table-bar">
                        <div class="page_nav">
                            <a class="icon_goback" onclick="window.history.go(-1)">返回上一层</a>
                            <a class="icon_goback_text" onclick="window.history.go(-1)">人员管理</a>
                            <span class="gap">/</span> 详情
                        </div>
                    </div>
                    <form id="form" class="form-horizontal js-kq-form">
                        <div class="tab-pane in">
                            <div class="form-item cf">
                                <label class="item-label">补签人</label>
                                <div class="controls">
                                    <div class="mod-tree-people__input">
                                        <ul class="token-input-submit input_text" style="width: 300px">
                                            <li v-if="uid" class="mod-lozenges__item token-input-token"
                                                @click="delete_user">
                                                <span class="mod-lozenges__icon"><img v-if="avr" :src="avr">
                                                    <img v-else="avr" src="./../$res/images/default_photo.png">
                                                </span>
                                                <span class="mod-lozenges__text">{{name}}</span>
                                                <span class="token-input-delete-token">
                                                    <i class="mod-lozenges__close-icon"></i>
                                                </span>
                                            </li>
                                            <input type="text" class="search-input-user"
                                                   style="display: inline-block; width: 50%;padding-left: 10px;"
                                                   placeholder="姓名/手机号"
                                                   autofocus="" @blur="" v-model="key">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="form-item cf">
                                <label class="item-label">补签时间</label>
                                <timeSelect :type="time" v-model="time"></timeSelect>
                            </div>
                            <div class="form-item cf"><label class="item-label">补签原因</label>
                                <div class="controls">
                                    <textarea type="text" class="text input-large" v-model="reason"></textarea>
                                </div>
                            </div>
                            <div class="tool_bar border with_form">
                                <button class="btn btn_primary btn-edit" type="button" @click="add">保 存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div v-if="search_result" class="menuContent" style="top: 310px;width: 300px"
             :style="{ left:leftPosition+'px'}">
            <div class="js_item_list" style="margin: 0 0 50px 30px;">
                <div v-for="list in search_result" class="mod-send-message__wrap-single"
                     @click="select_user(list.user_id,list.avatar,list.name)">
                    <img class="mod-send-message__logo" :src="list.avatar" width="24" height="24">
                    <span class="js_item_name" style="text-decoration: none;">{{list.name}}</span>
                    <a class="js_user_tags user_tag">{{list.depart_name}}</a>
                </div>
            </div>
        </div>
        <foot></foot>
    </div>
</template>
<script data-name="this.js">
    function get_data() {
        $$.ajax({
            url: "/sys/user/buqian",
            data: {uid: $$.m.uid, time: $$.m.time, reason: $$.m.reason},
            result: {
                $200: function () {
                    $$.toast.hide();
                    $$.alertTips.appear('补签成功');
                },
                $400: function (data) {
                    $$.toast.hide();
                    $$.alertTips.show(data.msg, 'error');
                }
            }
        });
    }
    function bq_info(callback) {
        $$.ajax({
            url: "/sys/user/bq_info",
            data: {keyword: $$.m.key},
            result: {
                $200: function (ret) {
                    callback(ret);
                }
            }
        });
    }
    require('../$res/js/common');
    require('./css/userSelct.less');
    module.exports = {
        template: require('!this.htm'),
        components: {
            'foot': $$.foot,
            'timeSelect': require('../$res/component/timePicker')
        },
        watch: {
            key: function () {
                var obj = $(".token-input-submit");
                var objOffset = obj.offset();
                if ($$.m.key != '')
                    bq_info(function (ret) {
                        if (ret.data != '') {
                            $$.m.leftPosition = objOffset.left;
                            $$.m.search_result = ret.data;
                        }
                    });
            }
        },
        methods: {
            select_user: function (uid, avr, name) {
                $$.m.search_result = false;
                $$.m.key = '';
                $$.m.uid = uid;
                $$.m.name = name;
                $$.m.avr = avr;
            },
            add: function () {
                $$.toast.show("补签中...");
                get_data();
            },
            delete_user: function () {
                $$.m.uid = false;
            }
        },
        loaded: function () {
            $$.m = {
                search_result: false,
                uid: false,
                key: '',
                time: '',
                reason: '',
                name: '',
                avr: '',
                leftPosition: ''
            };
            $$.init_comps.head();
            $$.init_comps.menu();
        }
    };
</script>
